<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-08 14:34:00
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 22:58:05
 * @FilePath: /nhw/src/views/Work/SafetyInspection/SafetyDetails.vue
-->
<template>
  <Layout
    class="safety-detail-container"
    title="安全检查"
    border
    @click-left="goBack"
  >
    <h2>任务状态-{{ formData.state }}</h2>
    <p>任务编号:{{ formData.rppdId || formData.rprId }}</p>
    <p v-if="fromType == '1'">实际检查时间:{{ formData.actualTime }}</p>
    <Stamp color="#fff" shadowColor="#E16916" :text="formData.state" />
    <section>
      <CellGroup>
        <Cell title="安全检查内容" :value="formData.rprName"> </Cell>
        <Cell title="检查类型" :value="formData.rprType" />
        <Cell
          title="检查范围"
          :value="formData.area"
          v-if="fromType == '0' || formData.rprType == '计划内'"
        />
        <Cell title="检查责任部门" :value="formData.dutyDepartName" />
        <Cell title="检查组组长" :value="formData.dutyUserName" />
        <Cell
          title="计划开始时间"
          :value="formData.planTime"
          v-if="fromType == '0' || formData.rprType == '计划内'"
        />
      </CellGroup>
      <CellGroup>
        <Cell title="是否存在安全隐患">
          <RadioGroup
            direction="horizontal"
            v-model="radio"
            icon-size=".4rem"
            checked-color="#E16712"
            :disabled="fromType == '1'"
          >
            <Radio name="1">是</Radio>
            <Radio name="0">否</Radio>
          </RadioGroup>
        </Cell>
        <Cell title="检查组成员">
          <input autosize type="textarea" v-model="member" disabled />
        </Cell>
      </CellGroup>
      <CellGroup>
        <Collapse v-model="activeNames">
          <CollapseItem
            :title="'问题项(' + questionGroup.length + ')'"
            name="1"
          >
            <Card
              v-for="(item, index) in questionGroup"
              :key="index"
              class="list-item"
            >
              <CardTitle
                class="item-container"
                :text="item.rrpTypeName"
                :stateText="item.state"
                adorn
              />
              <CardTwig left="整改责任人" :right="item.resolveUserName" />
              <CardTwig left="整改责任部门" :right="item.resolveDepartName" />
              <CardTwig left="发现时间" :right="item.findTime" />
            </Card>
          </CollapseItem>
        </Collapse>

        <Cell center v-if="fromType == '0'">
          <div class="add-question" @click.stop="toAppendQuestion">
            <Icon name="plus" />
            添加问题项
          </div>
        </Cell>
      </CellGroup>
      <!-- 提交  -->
      <div class="btn-wrap" v-if="fromType == '0'">
        <Button plain @click="submit">提交</Button>
      </div>
      <!-- 提交 -->
    </section>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import Stamp from "components/Stamp";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import {
  Cell,
  CellGroup,
  Icon,
  Popup,
  Picker,
  RadioGroup,
  Radio,
  Button,
  CollapseItem,
  Collapse,
} from "vant";

import { getCheckDetail, goToCheckUpdate } from "@/api/work.js";
export default {
  name: "SafetyDetails",

  components: {
    Layout,
    Stamp,
    Card,
    CardTwig,
    CardTitle,
    Cell,
    CellGroup,
    Icon,
    Popup,
    Picker,
    RadioGroup,
    Radio,
    Button,
    CollapseItem,
    Collapse,
  },

  data() {
    return {
      num: 0, //问题项数量
      radio: "1", //是 否
      member: "", //成员
      activeNames: ["1"],
      formData: {},
      questionGroup: [],
    };
  },
  computed: {
    rprNo() {
      return this.$route.query.id;
    },
    fromType() {
      return this.$route.query.type;
    },
  },

  created() {
    //初始化数据
    getCheckDetail({ rprNo: this.rprNo }).then((res) => {
      this.formData = res.param.data;
      this.radio = this.formData.isDanger;
      this.member = this.formData.dutyMember;

      this.questionGroup = [
        ...res.param.data.item,
        ...this.$store.state.questionGroup,
      ];
    });
  },
  mounted() {},
  methods: {
    async submit() {
      if (this.radio == "1") {
        if (this.questionGroup.length <= 0) {
          this.$toast("存在安全隐患需填写问题项内容");
          return;
        }
      }
      this.$toast.loading("提交中...");
      await goToCheckUpdate({
        rprNo: this.rprNo, //安全检查内容组件
        isDanger: this.radio, //是否有隐患
        dutyMember: this.member, // 成员名
        item: this.questionGroup, //问题项
      });
      this.$toast("提交成功！");
      this.$router.back();
      //提交成功后重置
      this.questionGroup = [];
      this.$store.state.questionGroup = [];
    },

    toAppendQuestion() {
      this.$router.push({ name: "SafetyAppendQuestion" });
    },

    goBack() {
      //返回上一页重置数据
      this.questionGroup = [];
      this.$store.state.questionGroup = [];
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/mixin.less");
@import url("~style/var.less");
.safety-detail-container {
  .backOrange();

  h2 {
    color: #fff;
    font-size: 48px;
    line-height: 2.5em;
    text-indent: 0.5em;
  }
  p {
    color: #fff;
    font-size: 28px;
    line-height: 2em;
    text-indent: 1em;
  }

  section {
    width: 100%;
    padding-bottom: 172px;
    background: #f7f7f9;
    .card();
    .van-cell-group {
      margin-bottom: 20px;
    }
    .title {
      align-items: center;
      text-indent: 1em;
      &::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 30px;
        background: linear-gradient(0deg, #e0680f, #e68840);
        border-radius: 3px;
        overflow: hidden;
      }
    }
    .add-question {
      width: 100%;
      min-height: 40px;
      color: @primary;
      .flex();
    }
    .van-radio-group {
      justify-content: flex-end;
    }

    //提交按钮
    .btn-wrap {
      width: 100%;
      padding-bottom: 44px;
      position: fixed;
      bottom: 0;
      left: 0;
      background: #fff;
      .flex();
      .van-button {
        .clickableBtn();
        overflow: hidden;
        margin: 30px auto 0;
      }
    }
  }
}

input {
  text-align: right;
  &::placeholder {
    text-align: right;
  }
}

//印章
.stamp-container {
  position: absolute;
  transform: scale(1.8);
  right: 80px;
  top: 80px;
  z-index: 90;
}
//card
.card-container {
  margin-top: 0;
}

/deep/.van-radio__icon .van-icon {
  border-color: @primary;
}
/deep/.van-radio__icon .van-icon {
  background: rgba(225, 103, 18, 0.2);
}
/deep/ .van-radio__icon--checked {
  .van-icon-success {
    background-color: rgba(225, 103, 18, 0.2) !important;
    background-image: radial-gradient(#e16712 50%, transparent 0);
    &::before {
      content: "";
    }
  }
}
/deep/ .van-collapse-item__content {
  padding: 0;
}
</style>